<template>
  <div id='tmpl'>
    <div class="row" v-for="(item,index) in datalist">
      <mt-switch class="switch" v-model="value[index]"></mt-switch>
      <img class="img" :src="item.thumb_path" alt="商品图片" height="75px" width="75px">
      <div class="inforight">
        <h4 v-text="item.title"></h4>
        <div class="bottom">
          <ul>
            <li>￥{{item.sell_price}}</li>
            <li><carInputNumber :initcount='item.cou' :goodsid="item.id" @cardataobj="getinputnumber"></carInputNumber></li>
            <li> <a href="javascript:void(0);" @click='delrow(item.id,index)' >删除</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="total">
      <div id="desc">
        <ul>
          <li>总计（不含运费）</li>
          <li>已勾选商品{{totalcount}}件，总价：￥{{totalAK}}元</li>
        </ul>
      </div>
      <div id="button">
      <mt-button type='danger' size="small">去结算</mt-button>
    </div>
    </div>
    
  </div>
</template>
<script>
import common from './kits/common.js';
import {getgoodsObject,updataData,removeItem} from './kits/localSg.js';
import {Toast} from 'mint-ui';
import carInputNumber from './carinputNumber.vue';
export default {
  components:{
    carInputNumber
  },
  computed:{
    totalcount(){
      var truearr = this.value.filter(function(item){
        return item;
      });
      var amount = 0;
      this.value.forEach((item,index)=>{
       if(item){
         var count = this.datalist[index].cou;
         var price = this.datalist[index].sell_price;
         var itemAK = count * price;
         amount+=itemAK;
       }
      })
      this.totalAK = amount;
      return truearr.length;
    }
  },
  data () {
    return {
      value:[],
      datalist:[],
      totalAK:0
    };
  },
  created(){
    
    this.getdatalist();
  },
  methods:{
    delrow(goodsid,index){
      
      this.value.splice(index,1);
      this.datalist.splice(index,1);
      removeItem(goodsid);
    },
    getinputnumber(resObj){
      updataData(resObj);
        
     
      for(var i = 0;i<this.datalist.length;i++){
        if(this.datalist[i].id == resObj.goodsid){
         if(resObj.type == 'add'){
            this.datalist[i].cou = this.datalist[i].cou+1
          }else {
            this.datalist[i].cou = this.datalist[i].cou-1
          }
          break;
        }

      }
    },
    getdatalist(){
      var obj = getgoodsObject();
      var idstring = '';
      for(var key in obj){
        idstring+=key+',';
      }
      idstring = idstring.substring(0,idstring.length-1);
      var url = common.apidomain+'/api/goods/getshopcarlist/'+idstring;
      this.$http.get(url).then(function(res){
         if(res.body.status != 0){
                Toast('res.body.message');
                  return;
            }
        res.body.message.forEach((item) => {
          this.value.push(false);
          item.cou = obj[item.id];
          
        });

        this.datalist = res.body.message;
        
      })
    }
  }
}
</script>
<style lang="css" scoped>
.row{
  height: 102px;
  border-bottom:1px solid rgba(0, 0, 0, 0.3);
  display: flex;
}
.switch{
  flex:0 0 52px;
}
.img{
  margin-top: 10px;
  height: 75px;
  width: 75px;
  flex:0 0 75px; 
}
.inforight{
  margin-top: 10px;
  flex:1;
  }
li{
  list-style: none;
  display: inline-block;
}
h4{
  color:#0094ff;
  font-size: 14px;
}
.bottom li:first-child{
  color:red;
  margin-right: 10px;
}
.bottom li:last-child{
  margin-right: 10px;
}
#total{
  height: 100px;
  background-color:rgba(0,0,0,0.2);
  display: flex;
  padding: 5px;
}
#total ul{
  padding-left: 0px;
  

}
#total li{
  list-style: none;
  font-size: 14px;
}
#button{
   flex:0 0 60px;
    margin: 30px 0 0 0;
}

.desc{ 
  flex:1;
}
</style>